<template>
    <div class="main" @touchstart="touchstart" @touchend="touchend">
        <div class="video" v-if="!reload">
            <video v-if="url" :src="url" :poster="poster" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" controlsList="nodownload" preload="auto" loop autopaly controls="controls" id="myaudio">
                您的浏览器不支持 audio 标签。
            </video>
            <div v-else class="nodata">请购买后播放视频</div>
        </div>
        <van-nav-bar class="mybar" :title="info.title" left-arrow @click-left="onClickLeft" />
        <div class="description">{{description || info.description}}</div>
        <ul class="chapter">
            <li v-for="(item,index) in info.chapter||[]" :key="index" :class="{active: index==currentIndex,noPay: !item.isPay && !item.is_free}" @click="changeIndex(index)">
                <div class="name">{{item.name}}</div>
                <div class="num">第{{index+1}}课</div>
                <van-icon name="play" />
            </li>
        </ul>
        <div class="footer" v-if="!info.isPay && info.total != 0">
            <div class="flexBox">
                <div class="flex1">购买此课程：<span class="num">{{info.total}}</span><span class="unit">金币</span></div>
                <div class="pay active" v-if="currentItem.isPay">已购买</div>
                <div class="pay" v-else @click="pay">支付购买</div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.main {
    padding-bottom: 120 / 2px;
    .nodata {
        color: #ffffff80;
        text-align: center;
        height: 250px;
        line-height: 250px;
    }
    .video {
        width: 100%;
        video {
            height: 250px;
            width: 100%;
            display: block;
        }
    }

    /deep/.van-nav-bar {
        background: #000 !important;
        max-width: 640px !important;
        display: block;
        margin: 0 auto;
        .van-nav-bar__content {
            color: #fff !important;
            .van-nav-bar__left {
                .van-icon {
                    color: #fff !important;
                    font-size: 22px !important;
                }
            }
            .van-nav-bar__title {
                font-weight: bold !important;
                color: #fff !important;
            }
        }
        &.van-hairline--bottom::after {
            border-width: 0 !important;
        }
    }
    .description {
        padding: 20px;
        color: #ffffff80;
    }
    .chapter {
        padding: 0 30 / 2px;
        li {
            background: @bgcolor;
            display: flex;
            border-radius: 10 / 2px;
            align-items: center;
            color: #fff;
            padding: 20 / 2px;
            margin-bottom: 20 / 2px;
            .name {
                flex: 1;
                overflow: hidden;
            }
            .num {
                padding: 0 20 / 2px;
                font-size: 24 / 2px;
                color: #ffffff80;
            }
            /deep/.van-icon {
                color: #ffffff80;
            }
            &.active {
                /deep/.van-icon {
                    color: #fff;
                }
            }
            &.noPay {
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 40 / 2px;
                    height: 100%;
                    background: url(../../../assets/images/lock.png) no-repeat
                        center top/100%;
                }
            }
        }
    }
    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        .flexBox {
            width: 100%;
            max-width: 640px;
            margin: 0 auto;
            display: flex;
            background: @bgcolor;
            align-items: center;
            padding: 10px;
            .flex1 {
                display: flex;
                flex: 1;
                align-items: flex-end;
                .num {
                    font-size: 25px;
                }
                .unit {
                    margin-left: 5px;
                    color: @yellow;
                }
            }
            .pay {
                background: @yellow;
                height: 35px;
                padding: 0 25px;
                line-height: 35px;
                border-radius: 50px;
                color: #333;
                &.active {
                    opacity: 0.8;
                }
            }
        }
    }
}
</style>
<script>
export default {
    data () {
        return {
            info: {},
            currentIndex: -1,
            user_info: {},
            reload: false,
            is_back: true
        }
    },
    mounted () {
        this.courseDetail()

    },
    beforeRouteEnter (to, from, next) {
        document.title = to.query.title || ""
        console.log(to.query.title)
        next()
    },
    watch: {
        url () {
            this.reload = true
            this.$nextTick(() => {
                this.reload = false
            })
        }
    },
    computed: {
        currentItem () {
            if (this.currentIndex > -1) {
                return this.info.chapter[this.currentIndex]
            } else {
                return {}
            }
        },
        poster () {
            let item = this.currentItem
            return item.poster
        },
        url () {
            let item = this.currentItem
            return (item.isPay || item.is_free) ? item.video_filefield : ''
        },
        description () {
            return this.currentItem.description
        }
    },
    methods: {
        touchstart (e) {
            this.pageX = e.changedTouches[0].pageX
        },
        touchend (e) {
            let pageX = e.changedTouches[0].pageX
            let distance = pageX - this.pageX
            if (distance > 100) {
                this.$router.back()
            }
        },
        courseDetail () {
            this.$model.comm.courseDetail(this.$route.query.id).then(res => {
                this.info = res.data || {}
                if (this.info.chapter.length) {
                    this.currentIndex = 0
                }
            })
        },
        changeIndex (index) {
            this.currentIndex = index
        },
        onClickLeft () {
            this.$router.back()
        },
        async pay () {
            let res = await this.$model.comm.getConfig()
            this.user_info = res.data.user_info || {}
            if (this.user_info.money < this.info.total) {

                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '账户余额不足',
                    confirmButtonText: '充值',
                }).then(() => {
                    this.$router.push('/person/balance')
                }).catch(() => {
                    // on cancel
                });
            } else {
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '确认购买',
                    confirmButtonText: '购买',
                }).then(() => {
                    this.courseDetail()
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
};
</script>